﻿<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>jQuery自定义编辑的树形菜单代码</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" th:href="@{/static/admin/jquery-ztree/css/bootstrapStyle/bootstrapStyle.css}" type="text/css">

<script type="text/javascript" th:src="@{/static/admin/jquery-ztree/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/admin/jquery-ztree/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/static/admin/jquery-ztree/js/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/static/admin/jquery-ztree/js/jquery.ztree.exedit.js}"></script>
<SCRIPT type="text/javascript">
// 	<!--
	var setting = {
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: true
		},
		check: {
			enable: true
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		edit: {
			enable: true
		}
	};

	var zNodes =[
		{id:1, pId:0, name:"[core] 基本功能 演示", open:true},
			{id:101, pId:1, name:"最简单的树 --  标准 JSON 数据", open:true},
				{id:111, pId:101, name:"最简单的树", open:true},
					{id:122, pId:111, name:"不显示 连接线", open:true},
						{id:134, pId:122, name:"不显示 节点 图标"},
					{id:123, pId:111, name:"不显示 节点 图标"},
				{id:112, pId:101, name:"不显示 连接线"},
				{id:113, pId:101, name:"不显示 节点 图标"},
			{id:102, pId:1, name:"最简单的树 --  简单 JSON 数据"},

		{id:2, pId:0, name:"[excheck] 复/单选框功能 演示", open:true},
			{id:201, pId:2, name:"Checkbox 勾选操作"},

		{id:3, pId:0, name:"[exedit] 编辑功能 演示", open:true},
			{id:301, pId:3, name:"拖拽 节点 基本控制"},

		{id:4, pId:0, name:"大数据量 演示", open:true},
			{id:401, pId:4, name:"一次性加载大数据量"},

		{id:5, pId:0, name:"组合功能 演示", open:true},
			{id:501, pId:5, name:"冻结根节点"},

		{id:6, pId:0, name:"其他扩展功能 演示", open:true},
			{id:602, pId:6, name:"配合 checkbox 的隐藏"},
			{id:603, pId:6, name:"配合 radio 的隐藏"}
		];

	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	});

	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
			+ "' title='add node' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_"+treeNode.tId);
		if (btn) btn.bind("click", function(){
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
			return false;
		});
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
	};
	//-->
</SCRIPT>
</HEAD>

<BODY>
<h1>zTree - bootstrap 风格</h1>
<ul id="treeDemo" class="ztree"></ul>

</BODY>
</HTML>